<template>
	<div class='h-100'>
		<section class='relative bc-fff' style='padding:50px 0px;'>
			<el-form id='form' :model='formData'  ref='form' label-width='100px' label-position='left'>
				<el-form-item label='名称' prop='price_name'>
					<el-input v-model='formData.price_name' type='text' autocomplete='off'></el-input>
				</el-form-item>
				<el-form-item label='计费方式' prop='pay_type'>
					<el-radio :disabled='priceId > 0' v-for='(item, key) in chargeTypes' v-model='formData.charge_type' :label='Number(key)' :value='Number(key)' :key='Number(key)'>{{item}}</el-radio>
				</el-form-item>
				<el-form-item label='最小计费单位' prop='charge_unit'>
					<el-input placeholder='' v-model='formData.charge_unit'>
						<template slot='append'>
							<div style='width:30px;text-align:center;'>{{formData.charge_type == 1 ? '分钟' : '度'}}</div>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label='最大功率' prop='max_power'>
					<el-input placeholder='' v-model='formData.max_power'>
						<template slot='append'>
							<div style='width:30px;text-align:center;'>W</div>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label='充满临界功率' prop='critical_power'>
					<el-input placeholder='' v-model='formData.critical_power'>
						<template slot='append'>
							<div style='width:30px;text-align:center;'>W</div>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label='延迟检测时间' prop='check_time'>
					<el-input placeholder='' v-model='formData.check_time'>
						<template slot='append'>
							<div style='width:30px;text-align:center;'>分钟</div>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label='预付费' prop='prepayment'>
					<el-input placeholder='' v-model='formData.prepayment'>
						<template slot='append'>
							<div style='width:30px;text-align:center;'>元</div>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item v-for='(item, index) in formData.class_rate' :label='rateIndexs[index] + "类费率"'>
					<el-col :span='10'>
						<el-input placeholder='' v-model='item.q'>
							<template slot='append'>
								<div style='width:30px;text-align:center;'>{{formData.charge_type == 1 ? '分钟' : '元/度'}}</div>
							</template>
						</el-input>
					</el-col>
					<el-col class='line' :span='1'>&nbsp;</el-col>
					<el-col :span='10'>
						<el-input placeholder='' v-model='item.w'>
							<template slot='append'>
								<div style='width:30px;text-align:center;'>W</div>
							</template>
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label='常用预设' prop='prePayment'>
					<div style='padding:20px;background:#f6f9fe;'>
						<div class='pre-item' v-for='(item, index) in formData.options'>
							<span class='title'>选项{{index + 1}}</span>
							<el-input v-model='item.a' class='e-linput'><div slot='append' style='width:30px;text-align:center;'>元</div></el-input>
							<el-input v-model='item.q' class='e-linput'><div slot='append' style='width:30px;text-align:center;'>{{formData.charge_type == 1 ? '小时' : '度'}}</div></el-input>
							<span @click='deletePricePre(index)' class='delete el-icon-circle-close middle'></span>
						</div>
						<div class='pre-item'>
							<span class='title'>选项{{formData.options.length + 1}}</span>
							<div @click='addPricePre' class='bc-fff relative pull-left' style='cursor:pointer;width:546px;border:1px dashed #dcdfe6;height:50px;margin-left:25px;'><i class='absolute xy el-icon-plus'></i></div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label=''>
					<el-button @click='$router.go(-1)'>返回</el-button>
					<el-button @click='submit' class='m-l-20' type='primary'>保存</el-button>
				</el-form-item>
			</el-form>
		</section>
	</div>
</template>

<script src='./add.js'></script>

<style lang='less' scoped>
	#form{
		width:800px;
		margin:auto;
	}
	
	.pre-item{
		overflow:hidden;
		position:relative;
		margin-top:20px;
		&:first-of-type{
			margin-top:0px;
		}
		.title{
			float:left;
		}
		
		.e-linput{
			float:left;
			width:260px;
			margin-left:25px;
		}
		
		.delete{
			position:absolute;
			right:0px;
		}
		
		
	}
	
</style>